import 'package:flutter/material.dart';
import '../../data/datasources/stats_data.dart';


/// `StatsRow` 在 POS 屏幕顶部显示一行关键统计数据。
///
/// 这个 Widget 展示了重要的指标，如“实收金额”、“应收金额”和“优惠金额”。
/// 统计数据从外部数据源（`statsData`）加载，这使得配置和扩展变得容易。
/// 布局上，它使用 `Row` 和 `Expanded` 来确保每个统计项都能均匀地占据可用空间。
///
/// This widget shows important metrics such as "实收金额" (Net Sales
/// "应收金额" (Gross Sales and "优惠金额" (Discount Amount). The stats are
/// loaded from an external data source, making it easy to configure and extend.
class StatsRow extends StatelessWidget {
  /// `StatsRow` 的构造函数。
  const StatsRow({super.key});

  @override
  Widget build(BuildContext context) {
    // 使用 `Row` 水平排列多个统计项。
    return Row(
      // `spaceBetween` 使得统计项之间有均匀的间距。
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      // 从 `statsData` 列表动态生成每个统计项的 Widget。
      children: statsData.map((stat) {
        // `Expanded` 确保每个统计项容器都能填充 `Row` 中的可用空间。
        return Expanded(
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 4.0),
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.0),
            ),
            // `_StatItem` 是实际显示单个统计数据的 Widget。
            child: _StatItem(
                value: stat.value, label: stat.label, valueColor: stat.color),
          ),
        );
      }).toList(),
    );
  }

}

/// `_StatItem` 是一个私有的 Widget，用于显示单个统计项。
///
/// 它封装了统计项的布局和样式，包括数值、标签和数值的颜色。
class _StatItem extends StatelessWidget {
  final String value;
  final String label;
  final Color? valueColor;

    /// `_StatItem` 的构造函数。
  const _StatItem({
    required this.value,
    required this.label,
    this.valueColor,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          value,
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: valueColor ?? Colors.black87,
          ),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: const TextStyle(
            color: Colors.grey,
            fontSize: 14,
          ),
        ),
      ],
    );
  }
}